<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8" />
   <title>shoot</title>
</head>

<body>
   <button id="btnShoot">shoot</button><br>
   <button id="btnAward">获得跟踪导弹</button><br>
   <button id="btnBreak">失去跟踪导弹</button><br>
   <script>
      var btnShoot=document.getElementById("btnShoot");
      var btnAward=document.getElementById("btnAward");
      var btnBreak=document.getElementById("btnBreak");
      //给btnShoot绑定单击事件处理函数，可发射普通子弹
      btnShoot.onclick=function(){
         console.log(`发射普通子弹......`)
      }
      //先定义一个发射跟踪导弹的有名称的函数
      function shoot2(){
         alert("发射跟踪导弹=>=>=>")
      }
      //当单击btnAward时，不是发生导弹，而是给btnShoot按钮再多绑定一种跟踪导弹
      btnAward.onclick=function(){
         //不能再用onclick=function(){ ... }
         // btnShoot.onclick=function(){
         //    alert("发射跟踪导弹=>=>=>");
         // }
         //想浏览器的事件监听对象的队列中添加了一个新的监听对象，元素:btnShoot, 事件名:click。
         btnShoot.addEventListener(
            "click",
            shoot2
         )
      }
      //单击btnBreak时，从btnShoot上移除发射跟踪导弹的事件监听对象
      btnBreak.onclick=function(){
         btnShoot.removeEventListener(
            "click",
            shoot2
         )
      }
   </script>
</body>

</html>